<template>
<div>
<News></News>
  <div class="app">

    <div class="contain">
      <div class="tag">
        <h2>
          <el-icon :size="50">
            <Document />
          </el-icon>
          价格亲民
        </h2>
        <h2>
         <van-icon name="thumb-circle-o" :size="50"/>
          物流便捷
        </h2>
        <h2>
         <van-icon name="gift-card-o" :size="50"/>
          品质新鲜
        </h2>
      </div>
      <div class="msg">
      <a href="">关于我们</a>
       <a href="">帮助中心</a>
        <a href="">售后服务</a>
         <a href="">配送与验收</a>
          <a href="">商务合作</a>
           <a href="">搜索推荐</a>
           <a href="">友情链接</a>
      </div>
      <div class="mine">
      @wqq 小兔仙
      </div>
    </div>
  </div>
  </div>
</template>

<script setup >
import News from './news.vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
</script>

<style lang='less' scoped>
.contain {
  height: 348px;
  background-color: #333333;
}

.app {
  width: 100%;

  background-color: #333333;
}
.tag {
  color: #fff;
  width: 100%;
  height: 173px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h2 {
  font-size: 28px;
  text-align: center;
  display: flex;
  align-items: center;
}
.el-icon {
  margin-left: 5px;
  color: #fff;
}
.van-icon{
  margin-left: 5px;
  color: #fff;
}
.msg{
    text-align: center;
}
a{
    color: #999;
    font-size: 15px;
    display: inline-block;
    padding: 0 5px;
    border-right:1px #999 solid ;
}
.mine{
    text-align: center;
      color: #999;
      padding: 20px;
}
</style>